// 组件中提交数据到Mutaions然后更改状态值最后我们再重新提交给组件二次渲染
import Vue from 'vue'
import Vuex from 'vuex'
import { getbanner } from '@/api' // 引入我们在数据请求模块中定义的异步数据请求的方法

Vue.use(Vuex) // 调用Vuex状态管理器

// 01.设置状态管理器初始值
const store = new Vuex.Store({
  state: { // 这个就是我们项目中所需要用到的数据的状态初始值的地方
    bannerlist: []
  },
  // 04.vuex中的计算属性,直接使用store.getters来调用即可
  getters: {
    getbannerslen (state) {
      return state.bannerlist.length
    }
  },
  // 03.actions中定义异步请求数据的方法,最后在组件中直接使用store.dispatch调用这个actions就可触发方法
  actions: { // actions属性是专门用来异步操作的
    getbannerlistaction (context) { // 定义一个异步请求数据的方法,context:就相等于指向当前的store的this

    // 001.基本使用
    //   getbanner ().then(res => { // 调用异步请求数据接口
    //     context.commit({ // 触发commit方法
    //       type: 'changeBannerlist',
    //       paylosd: res.data.data
    //     })
    //   })

    // 002.若是在请求完数据后我们还有后续的操作的话,可以使用promise封装actions
      return new Promise((resolve, reject) => {
        getbanner().then(res => {
          context.commit({
            type: 'changeBannerlist',
            payload: res.data.data
          })
          resolve()
        })
      })
    }
  },
  // 02.定义更改初始状态的方法
  mutations: { // 唯一的改变状态的地方
    changeBannerlist (state, data) {
      state.bannerlist = data.payload
    }
  }
})

// 05.调用actions
// 001.基础用法
// store.dispatch('getbannerlistaction')
// 002.可以后续继续操作
store.dispatch('getbannerlistaction').then(() => {
  // 比如执行上拉加载中页码加1，拼接数据
})

// 06.调用计算属性
// console.log(store.getters)

// 将这个变量暴露出去,这个是再我们的入口文件index.js中已经引入了
export default store
